<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- include jQuery + carouFredSel plugin -->
<script src="/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/js/carousel/jquery.carouFredSel-6.1.0-packed.js"
	type="text/javascript"></script>
<link href="/css/carousel/carouFredSel.css" rel="stylesheet"
	type="text/css" />

<script src='/js/menu/jquery.hoverIntent.minified.js'
	type='text/javascript'></script>
<script type='text/javascript' src='/js/menu/jquery.dcmegamenu.1.3.3.js'></script>
<link href="/css/menu/black.css" rel="stylesheet" type="text/css" />
<link href="/css/menu/dcmegamenu.css" rel="stylesheet" type="text/css" />
<link href="/css/css.css" rel="stylesheet" type="text/css" />
<script src='/js/lightbox/lightBox.js' type='text/javascript'></script>
<script src='/js/menu.view.js' type='text/javascript'></script>

<style>
</style>
</head>
<body>
	<header style="height: 100px;"> </header>
	
	<style>
		.image_carousel article {
			border-bottom: 1px dotted #dfdfdf;
		}
	</style>

	<div id="menu" class="black"></div>
	<script>
		var admin = true;
		new Menu().loadMenuData();
	</script>

	<script>
		function goToProduct(id){
			window.location.href = window.location.href+'/'+id;
		}
		
		window.onscroll = function() {

			if (window.pageYOffset >= window.scrollMaxY - 100) {
				/*alert("scroll end");*/
			}

		}
	</script>

	<div id="_body">



		<script>
			function GalleryView() {
				var newData = {};
				this.loadNewGallery = function() {
					newData = [
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg'
							},
							{
								'id' : '23',
								'title' : 'Footer content',
								'price' : '2500 VND',
								'image' : 'http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg'
							} ];
					display();
				};

				var display = function(galleryContainer) {
					var container = document
							.getElementById('gallery_container');
					var productList = createProductList(newData);
					var le = productList.length;
					var i = 0;
					container.appendChild(productList[i]);
					var lineHeight = productList[i].offsetHeight;
					container.style.height = container.offsetHeight
							+ lineHeight + 'px';
					for (i = 1; i < le; i++) {
						container.appendChild(productList[i]);
						if (i % 5 == 0) {
							container.style.height = container.offsetHeight
									+ lineHeight + 'px';
						}
					}
				};

				var createProductList = function(productListData) {
					var productList = new Array();
					var productData;

					var le = productListData.length;
					for ( var i = 0; i < le; i++) {
						productData = productListData[i];
						productList[i] = displayProductWithShortInfo(productData);
					}
					return productList;
				};

				var displayProductWithShortInfo = function(productData) {
					var article = document.createElement('article');
					var image = document.createElement('img');
					var footer = document.createElement('footer');
					var title = document.createElement('div');
					var price = document.createElement('div');

					image.setAttribute('src', productData.image);
					image.setAttribute('alt', productData.title);
					image.setAttribute('onclick', 'goToProduct('+productData.id+')');
					title.setAttribute('class', 'title');
					title.innerHTML = productData.title;
					title.setAttribute('onclick', 'goToProduct('+productData.id+')');
					price.setAttribute('class', 'price');
					price.innerHTML = productData.price;

					footer.appendChild(title);
					footer.appendChild(price);

					article.appendChild(image);
					article.appendChild(footer);

					return article;
				};
			}
		</script>




		<section class="image_carousel">
			<div class="pagination1">dfsdfg</div>
			<div id="gallery_container" class="gallery_container">
				<!-- 
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg"
						alt="basketball" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>

				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg"
						alt="beachtree" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg"
						alt="cupcackes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg"
						alt="hangmat" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg"
						alt="new york" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg"
						alt="laundry" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg"
						alt="mom son" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg"
						alt="picknick" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				 -->
				<script>
					new GalleryView().loadNewGallery();
				</script>
			</div>

			<div class="clearfix"></div>
			<style>
.gallery_pagination {
	text-align: center;
	background: -moz-linear-gradient(center top, #F1F1F1, #CBCBCB) repeat
		scroll 0 0 transparent;
	border-color: #E0E0E0 #E0E0E0 #B4B4B4;
	border-style: solid;
	border-width: 1px 0;
	height: 30px;
	padding-top: 12px;
	text-transform: uppercase;
}

.gallery_pagination strong {
	background: none repeat scroll 0 0 #DDDDDD;
	border: 1px solid #CCCCCC;
	color: #000000;
	cursor: default;
	font-weight: bold;
	overflow: visible;
	padding: 6px 8px;
	vertical-align: middle;
	white-space: nowrap;
}

.gallery_pagination a {
	background: -moz-linear-gradient(center top, #FFFFFF, #EFEFEF) repeat
		scroll 0 0 #F6F6F6;
	border: 1px solid #CCCCCC;
	color: #0033CC;
	cursor: pointer;
	overflow: visible;
	padding: 6px 9px;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	text-align: center;
}

.gallery_pagination a:hover {
	background: -moz-linear-gradient(center top, #FFFFFF, #EBEBEB) repeat
		scroll 0 0 #F3F3F3;
	border-color: #999999;
	outline: 0 none;
	padding: 6px 9px;
}
</style>
			<div class="gallery_pagination" id="foo_pag">
				<a rel="first" href="">Đầu trang</a> <a rel="prev" href="">Trước</a>
				<a href="">1</a> <a href="">2</a> <strong>3</strong> <a href="">4</a>
				<a rel="next" href="">Tiếp</a> <a rel="last" href="">Cuối cùng</a>
			</div>
		</section>




	</div>

	<footer style="height: 100px"> </footer>
</body>
</html>

